import React, { useState, useRef, useEffect } from 'react';
import { Button, Card, Modal, } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
const SelelctModel = (props) => {
    const {
        visible = false, onClose, dispatch, onSetList,
        collectionList,
        loading,
        getCheckboxProps
    } = props;
    const { show = false, detail = [], sy } = visible;
    useEffect(() => {
        if (show) {
            setSelectedRowKeys(detail);
        }
    }, [show]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const rowSelection = {
        type: 'checkBox',
        hideSelectAll: true,
        // onChange: (selectedRowKeys, selectedRows) => {
        //   setSelectedRowKeys(selectedRows);
        // },
        onSelect: (record, selected) => {
            const { skuFlag, id } = record;
            if (selected) {
                setSelectedRowKeys([...selectedRowKeys, record]);
            } else {
                setSelectedRowKeys(
                    selectedRowKeys.filter((item) => {
                        return item.id !== id;
                    }),
                );
            }
        },
        selectedRowKeys: selectedRowKeys.map((item) => {
            return item.id.toString();
        }),
        // getCheckboxProps: (record) => {
        //     if (!getCheckboxProps) {
        //         return {
        //             disabled: record.id === id && goodsType === 'offline',
        //             // Column configuration not to be checked
        //             id: record.id,
        //         };
        //     } else {
        //         return getCheckboxProps(record, goodsType);
        //     }
        // },
        preserveSelectedRowKeys: true,
    };
    const searchItems = [
        {
            label: '信息采集名称',
            name: 'address',
        },
    ];
    // table 表头
    const getColumns = [
        {
            title: '信息采集名称',

            dataIndex: 'title',
        },
        {
            title: '是否允许充分',

            dataIndex: 'repeatFlag',
            render: (e) => {
                return ['否', '是'][e];
            },
        },
        {
            title: '是否允许独立采集',
            dataIndex: 'independentFlag',
            render: (e) => {
                return ['否', '是'][e];
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: '创建人',
            dataIndex: 'createAdminName',
        },
    ];
    const modalProps = {
        title: `选择信息采集`,
        width: 1200,
        visible: show,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        onOk: () => {
            onSetList(sy, selectedRowKeys);
            onClose();
        },
    };
    return (
        <>
            <Modal {...modalProps} onCancel={onClose}>
                <Card>
                    <TableDataBlock
                        rowSelection={rowSelection}
                        loading={loading}
                        searchItems={searchItems}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="liveStreaming/fetchInformationCollection"
                        {...collectionList}
                    ></TableDataBlock>
                </Card>
            </Modal>

        </>
    );
};

export default connect(({ liveStreaming, loading }) => ({
    collectionList: liveStreaming.informationCollectionList,
    loading: loading.effects['liveStreaming/fetchInformationCollection'],
}))(SelelctModel);
